function demarrerCanvas()
{
	elementsConcepts = new Array();
	// Récupération du nom du concept
	var titre = $('#titreConcept').text();
	var tab = titre.split(" : ");
	var concept = tab[1];
	
	// Récupération du canvas
	var canvas = document.getElementById("canvasConcept");
        var contexte = canvas.getContext("2d");
	
	dessinerConceptsAssocies(canvas,concept,canvas.width,canvas.height,1);
	
	$("#canvasConcept").click(function(eventObject) 
	{
		//alert("aa");
		mouseX = eventObject.pageX - this.offsetLeft;
		mouseY = eventObject.pageY - this.offsetTop;
		clicGraphe(mouseX,mouseY);
	});
	
}

var elementsConcepts;

function clicGraphe(x,y)
{
	for(i=0; i<elementsConcepts.length; i++)
	{
		if (x > elementsConcepts[i].mX - elementsConcepts[i].mLargeur/2 - 5 &&
			    x < elementsConcepts[i].mX + elementsConcepts[i].mLargeur/2 + 5 && 
			    y > elementsConcepts[i].mY - elementsConcepts[i].mHauteur/2 - 5 &&
			    y < elementsConcepts[i].mY + elementsConcepts[i].mHauteur/2 + 5)
		{
			window.location.href = 'index.php?page=concept&concept=' + elementsConcepts[i].mTexte;
		}
	}
}

function dessinerSousConceptsAssocies(canvas,orig,concept,cX,cY)
{
	var contexte = canvas.getContext("2d");
	var conceptsAssocies = getConceptsAssocies(concept);
	var nomConcepts = conceptsAssocies[0];
	var nomAssocs = conceptsAssocies[1];
	
	var origine = orig.slice(0,-1);
	
	var cadSize = nomConcepts.length;
	
	for (k=0; k<cadSize; k++)
	{
		if (nomConcepts[k] == origine)
		{
			nomConcepts.splice(k,1);
		}
	}
	cadSize = nomConcepts.length;
	
	for (j=0; j<cadSize; j++)
	{
		if (nomConcepts[j] != "")
		{
			// Calcul des coordonnées
			var x = Math.cos(2*Math.PI/(cadSize)*j+(5*Math.PI/4))*70;
			var y = Math.sin(2*Math.PI/(cadSize)*j+(5*Math.PI/4))*70;
			x = x+cX;
			y = y+cY;
			
			// Trait
			dessinerTrait(contexte,cX,cY,x,y);
	
			// Dessin du noeud
			var el = new NoeudGraphe(contexte,nomConcepts[j],x,y,"#84815b",13,10);
			el.dessiner();
		}
	}
	
	var elConcept = new NoeudGraphe(contexte,"",cX,cY,"#84815b",36,25);
	elConcept.dessiner();
}

function dessinerConceptsAssocies(canvas,concept,cX,cY)
{
	var contexte = canvas.getContext("2d");
	// Récupération des concepts associés
	var conceptsAssocies = getConceptsAssocies(concept);
	var nomConcepts = conceptsAssocies[0];
	var nomAssocs = conceptsAssocies[1];
	
	var posX = cX/2;
	var posY = cY/2;
	
	var caSize = nomConcepts.length;
	for (i=0; i<caSize; i++)
	{
		if (nomConcepts[i] != "")
		{
			// Calcul des coordonnées
			var x = Math.cos(2*Math.PI/(caSize)*i+Math.PI)*150;
			var y = Math.sin(2*Math.PI/(caSize)*i+Math.PI)*150;
			x = x+posX;
			y = y+posY;
			
			// Dessin du nom de l'association
			dessinNomAssoc(contexte,nomAssocs,x,y,caSize);
			
			// Trait
			dessinerTrait(contexte,posX,posY,x,y);
			dessinerSousConceptsAssocies(canvas,concept,nomConcepts[i],x,y)
	
			// Dessin du noeud
			var el = new NoeudGraphe(contexte,nomConcepts[i],x,y,"#84815b",13,10);
			el.dessiner();
			elementsConcepts.push(el);
		}
	}
	
	// Dessin du concept
	var elConcept = new NoeudGraphe(contexte,concept,posX,posY);
	elConcept.dessiner();
}

function dessinNomAssoc(contexte,nomAssocs,x,y,caSize)
{
	var nomAssoc = nomAssocs[i];
	contexte.save();
	contexte.textAlign = "center";
	contexte.font = "14px Arial";
	contexte.fillStyle = "#777777";
	contexte.translate(x,y);
		// Si c'est un multiple de PI, on affiche pas en sens inverse.
	if (2*Math.PI/caSize*i != Math.PI)
	{
		contexte.rotate(2*Math.PI/caSize*i);
		contexte.fillText(nomAssoc,80,0);
	}
	else
	contexte.fillText(nomAssoc,-70,0);
	contexte.restore();
}

// Récupère les concepts associés au concept actuel
function getConceptsAssocies(concept)
{
	var retour;
	var arr;
	xhr = getXhr();
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4 && xhr.status == 200)
		{
			var r = xhr.responseText;
			retour = r.split("!");
			var concepts = retour[0].split("*");
			var assoc = retour[1].split("*");
			arr = new Array(concepts,assoc);
			return arr;
		}
	};
	xhr.open("GET","ajaxconcept.php?query=assoc&concept="+concept,false);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send();
	
	return arr;
}

// Gestion de l'AJAX
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest)
		xhr = new XMLHttpRequest();
	else
	{ 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}

// Classe qui représente un noeud du graphe
	// couleur, largeur, hauteur optionnels
function NoeudGraphe(contexte,texte,x,y,couleur,largeur,hauteur)
{
	var mContexte = contexte
	this.mTexte = texte;
	this.mX = x;
	this.mY = y;
	
	if (couleur == undefined) { var mCouleur = "#ADCF4F"; }
	else { var mCouleur = couleur; }
	
	if (largeur == undefined) { this.mLargeur = 70; }
	else { this.mLargeur = largeur; }
	
	if (hauteur == undefined) { this.mHauteur = 50; }
	else { this.mHauteur = hauteur; }
	
	this.dessiner = function()
	{
		mContexte.beginPath();
		mContexte.moveTo(this.mX,this.mY-this.mHauteur/2);
		// Ellipse
		mContexte.bezierCurveTo(this.mX+this.mLargeur/2,this.mY-this.mHauteur/2,this.mX+this.mLargeur/2,this.mY+this.mHauteur/2,this.mX,this.mY+this.mHauteur/2);
		mContexte.bezierCurveTo(this.mX-this.mLargeur/2,this.mY+this.mHauteur/2,this.mX-this.mLargeur/2,this.mY-this.mHauteur/2,this.mX,this.mY-this.mHauteur/2);
		// Remplissage
		mContexte.fillStyle = mCouleur;
		mContexte.fill();
		mContexte.closePath();
		// Draw Text
		var fontSize = 16;
		mContexte.font = fontSize + "px Arial";
		var textWidth = mContexte.measureText(this.mTexte).width;
		mContexte.fillStyle = "#3f2929";
		mContexte.fillText(this.mTexte,x-textWidth/2,this.mY+fontSize*1.4);
	}
}

// Dessine un trait sur le contexte donné, de (x,y) à (xb,yb)
function dessinerTrait(contexte,x,y,xb,yb)
{
	contexte.beginPath();
	contexte.moveTo(x,y);
	contexte.lineTo(xb,yb);
	contexte.strokeStyle ='#3f2929';
	contexte.stroke();
	contexte.closePath();
}
